<template>
    <div>
        <h1>父组件</h1>
        <button @click="changeShow">改变show的值</button>
        <child-vue v-if="show"></child-vue>
        <!--
             v-if true 显示childvue  v-if false 销毁childvue组件
             点击按钮改变show show取反 true变false 再点false变true
             第一次点击就是子组件销毁 第二次再点击就是子组件重建
         -->
    </div>
</template>

<script lang="ts">
import { 
    defineComponent,
    ref,
    onBeforeMount,
    onBeforeUnmount,
    onBeforeUpdate,
    onMounted,
    onUnmounted,
    onUpdated,
} from 'vue'
import childVue from './childVue.vue';
export default defineComponent({
    components:{
        childVue,
    },
    setup () {
        let show=ref(true);
        function changeShow(){
            console.log(show);
            // 时刻注意 vue3当中处理ref的值的时候需要 xx.vue
            show.value=!show.value
        }
        onBeforeMount(() => {
      console.log("父组件的onBeforeMount");
      //
      console.log(this);
        });
        onMounted(() => {
        console.log("父组件的onMounted");
        console.log(this);
        });
        onBeforeUpdate(() => {
        console.log("父组件的onbeforeUpadte");
        console.log(this);
        });
        onUpdated(() => {
        console.log("父组件的onUpdated");
        console.log(this);
        });
        onBeforeUnmount(() => {
        console.log("父组件的onBeforeUnmount");
        console.log(this);
        });
        onUnmounted(() => {
        console.log("父组件onUnmounted");
        console.log(this);
        });
        return {
            show,
            changeShow,
        };
    },
    data(){
        return{
            info:'看看setup当中的值是否可以和data当中的值都放到组件对象上'
        }
    },
    beforeCreate(){
        console.log('父组件的beforeCreate');
        console.log(this);
        console.log(this.show);
        console.log(this.info);
    },
    created(){
        console.log('父组件的created')
    },
    beforeMount(){
        console.log('父组件的beforeMount')
    },
    mounted(){
        console.log('父组件的mounted')
    },
    beforeUpdate(){
        console.log('父组件的beforeUpdate')
    },
    updated(){
        console.log('父组件的updated')
    },
    beforeUnmount(){
        console.log('父组件的beforeUnmount')
    },
    unmounted(){
        console.log('父组件的unmounted')
    }
    /*
    vue2当中的声明周期钩子
    vue3当中的声明周期钩子函数
    beforCreate
    created
    beforeMount
    mounted
    beforeUpdate
    updated
    beforeUnmount
    unmounted
    可以在配置对象中直接写声明周期钩子函数
    但是不建议这么写

    在vue3当中父子组件的加载顺序和vue2是相同的 不同的就是beforeUnmount unmounted

    使用到生命周期构造函数时，使用组合api代替生命周期构造
    beforeCreate    setup()
    created         setup()
    beforeMount     onBeforeMount
    mounted         onMounted
    beforeUpdate    onBeforeUpdate
    updated         onUpdated
    beforeUnmount   onBeforeUnmount   组件挂载到节点之前执行的函数
    unmounted       onUnmounted     组件卸载前执行的函数
    setup发生在beforeCreate之前

    在使用用组合api时，需要在import当中从vue中提前引入，否则报错

    setup当中的代替生命周期钩子的组合api，比生命周期钩子函数发生的要优先


    生命周期钩子函数  beforeUnmount  unmounted ------beforedestory  destoryed
    在setup当中写的组合API  onBeforeUnmount   onUnmounted


    点击show  子组件  销毁      第二次 重建


    两个点：
    1. setup在beforeCreate之前执行，组件对象还没有创建，this是undefined，不能通过this访问data/computed/methods...
    2. setup返回值中的属性会同data中的属性合并成为组件对象上的属性
        它中的方法会同methods中的方法合并成为组件对象上的方法
    */
})
</script>

<style scoped>

</style>